import { reactive,onMounted,onUnmounted } from "vue";
import {boxData} from '../../../../utils/interface'
interface state{
    offsetX: number;//鼠标距离盒子
    offsetY: number
    clientX:number//鼠标距离屏幕距离
    clientY:number
    drawingOffsetX:number,//画布的偏移量
    drawingOffsetY:number,
    data: boxData[],
    seletName: string,
    mousedown:boolean,
    scaleShow:boolean,
    isOffset:boolean,
    seletData:boxData|undefined
}
export default ()=>{
  const state:state = reactive({
    offsetX: 0,//鼠标距离盒子
    offsetY: 0,
    clientX:0,//鼠标距离屏幕距离
    clientY:0,
    drawingOffsetX:0,//画布的偏移量
    drawingOffsetY:0,
    data: [],
    seletName: "box1",
    mousedown:false,
    position:{x:0,y:0},
    scaleShow:false,
    isOffset:true,
    seletData:undefined
  });
  let node:HTMLElement|null
  let x = 0;
  let y = 0;
  let l = 0;
  let t = 0;
  // 拖动触发
  const mousemove = (a:any) => {
    if(state.mousedown){//如果选中了物体
      state.clientX= a.x;
      state.clientY=a.y;
      state.offsetX = a.offsetX;
      state.offsetY = a.offsetY;
      // console.log(node!.offsetWidth)
      // console.log(node!.clientWidth)
      state.seletData!.style.width=(node!.offsetWidth as number)
      state.seletData!.style.height=(node!.offsetHeight as number)
      getBoundary(a.offsetX,a.offsetY)
      // //获取x和y
      if(!state.isOffset){
        state.scaleShow=true;
        const nx = a.clientX;
        const ny = a.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        const nl = nx - (x - l);
        const nt = ny - (y - t);
        state.seletData!.style.left = nl ;
        state.seletData!.style.top = nt ;
      }
    }
  };
  // 弹起触发
  const mouseup=()=>{
    state.mousedown=false;
    state.scaleShow=false;
  }
  const getBoundary=(x:number,y:number)=>{
    if(x>node!.offsetWidth-20&&y>node!.offsetHeight-20){ 
      state.isOffset=true;
    }else{
      state.isOffset=false;
    }
  }

  // 选中的box触发事件 按下触发的事件
  const selectMousedown=(params:{id:string,target:any})=>{
    if(!node){
      changeNode(params.id)
      
    }
    state.seletName=params.id;
    state.mousedown=true
    //获取x坐标和y坐标
    state.clientX=x = params.target.clientX;
    state.clientY=y = params.target.clientY;
    //获取左部和顶部的偏移量
    state.offsetX=l= node!.offsetLeft;
    state.offsetY=t=node!.offsetTop;
    state.seletData = state.data.find((item: any) => item.id === params.id);
  }
  // 进入盒子或者离开盒子
  const selectMouseover=(params:{id:string,status:boolean})=>{
    if(params.status){
      changeNode(params.id)
      state.seletData = state.data.find((item: any) => item.id === params.id);
    }
  }
  const changeNode=(id:string)=>{
    node = (document.getElementById(`${id}`) as HTMLElement);
    state.data.forEach(item=>{
      item.id===id?item.style.zIndex=2:item.style.zIndex=1
    })
  }
// 拿到画布的位置
  const positionInt=()=>{
    const node=document.getElementById("drawing")
    state.clientX=state.drawingOffsetX= (node as any).getBoundingClientRect().left
    state.clientY=state.drawingOffsetY= (node as any).getBoundingClientRect().top
  }
  onMounted(()=>{
    positionInt()
    window.addEventListener("resize",positionInt)

  })
  onUnmounted(() => {
    console.log("离开销毁页面")
    window.removeEventListener("resize", positionInt);
  });
  return {state,mousemove,selectMousedown,mouseup,selectMouseover}
}